<template>
  <div class="server-progress">
    <el-table :data="props.serverMonitor.topProcesses"
              :header-cell-style="{ background:'var(--el-color-primary)', color:'#FFFFFF' }"
              :cell-style="{ fontSize: '0.9rem' }"
              border>
      <el-table-column prop="pid" label="pid" align="center" width="70"/>
      <el-table-column prop="name" label="名称" align="center" width="120"/>
      <el-table-column prop="cpu" label="cpu(%)" align="center" width="80"/>
      <el-table-column prop="mem" label="内存(%)" align="center" width="80"/>
      <el-table-column prop="user" label="使用者" align="center" width="80"/>
      <el-table-column prop="command" label="启动命令" align="center" width="150"/>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IServerMonitor } from '@/types/server.ts'

const props = defineProps({
  serverMonitor: {
    required: true,
    type: Object as PropType<IServerMonitor>
  }
})
</script>


<style lang="scss">
.server-progress {
  .el-table {
    border-radius: 10px;
  }
}
</style>
